<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Light Blue Documentation</title>
    <link href="css/documentation.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
</head>
<body class="background-two">
<nav id="sidebar" class="sidebar">
    <ul id="side-nav" class="side-nav">
        <li class="green">
            <a href="index.html"><i class=" icon-desktop"></i> <span class="name">Dashboard</span></a>
        </li>
        <li class="teal accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#side-nav" href="#stats-collapse"><i class=" icon-bar-chart"></i> <span class="name">Statistics</span></a>
            <ul id="stats-collapse" class="accordion-body collapse">
                <li><a href="stat_statistics.html">Stats</a></li>
                <li><a href="stat_charts.html">Charts</a></li>
                <li><a href="stat_realtime.html">Realtime</a></li>
            </ul>
        </li>
        <li class="blue accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#forms-collapse"><i class=" icon-edit"></i> <span class="name">Forms</span></a>
            <ul id="forms-collapse" class="accordion-body collapse">
                <li><a href="form_account.html">Account</a></li>
                <li><a href="form_article.html">Article</a></li>
                <li><a href="form_elements.html">Elements</a></li>
                <li><a href="form_validation.html">Validation</a></li>
                <li><a href="form_wizard.html">Wizard</a></li>
            </ul>
        </li>
        <li class="brown accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#ui-collapse"><i class=" icon-magic"></i> <span class="name">UI</span></a>
            <ul id="ui-collapse" class="accordion-body collapse">
                <li><a href="ui_buttons.html">Buttons</a></li>
                <li><a href="ui_dialogs.html">Dialogs</a></li>
                <li><a href="ui_icons.html">Icons</a></li>
                <li><a href="ui_tabs.html">Tabs</a></li>
                <li><a href="ui_accordion.html">Accordion</a></li>
            </ul>
        </li>
        <li class="dark-red accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#components-collapse"><i class=" icon-bookmark-empty"></i> <span class="name">Components</span></a>
            <ul id="components-collapse" class="accordion-body collapse">
                <li><a href="component_calendar.html">Calendar</a></li>
                <li><a href="component_maps.html">Maps</a></li>
                <li><a href="component_gallery.html">Gallery</a></li>
                <li><a href="component_fileupload.html">Fileupload</a></li>
            </ul>
        </li>
        <li class="red accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#tables-collapse"><i class=" icon-table"></i> <span class="name">Tables</span></a>
            <ul id="tables-collapse" class="accordion-body collapse">
                <li><a href="tables_static.html">Static</a></li>
                <li><a href="tables_dynamic.html">Dynamic</a></li>
            </ul>
        </li>
        <li class="active orange">
            <a href="grid.html"><i class=" icon-columns"></i><span class="name">Grid</span></a>
        </li>
        <li class="lime accordion-group">
            <a class="accordion-toggle collapsed" data-toggle="collapse"
               data-parent="#side-nav" href="#special-collapse"><i class=" icon-asterisk"></i> <span class="name">Special</span></a>
            <ul id="special-collapse" class="accordion-body collapse">
                <li><a href="special_search.html">Search</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="special_404.html">404</a></li>
            </ul>
        </li>
    </ul>
</nav>
<div class="wrap">
    <header class="page-header">
        <h1>Documentation</h1>
    </header>
    <div class="content container-fluid">
        <div class="row-fluid">
            <div class="span10 offset1">
                <section class="widget">
                    <h2>Grid</h2>
                    <p><strong>Light Blue</strong> inherits 12-column grid system from
                        <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">Bootstrap's great one</a>.</p>
                    <p>There are two types of grid systems: fixed and fluid. Light Blue markup is built with fluid one,
                    but looks great with fixed too. The difference between two is that first one uses fixed 940px wide container,
                    while second one uses 100% width.</p>
                    <p>Bootstrap provides a documentation for 
                        <a href="http://twitter.github.com/bootstrap/scaffolding.html#gridSystem">fixed</a> and
                        <a href="http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem">fluid</a> grid systems.</p>
                    <p>If screen changes its size, grid will react accordingly and change column sizes too to look
                    best on any screen.</p>
                    <p>Sometimes this behaviour has to be omitted, so you can add <code>.non-responsive</code>
                    class to <code>.row-fluid</code>. Columns within this row will not become 100% width when screen
                    goes below 767px.</p>
                    <h2>Widgets</h2>
                    <p>Light Blue widget looks simple and may contain three parts: header, body and footer. But any of them
                    can be omitted. So the basic widget structure looks like:</p>
                    <pre>&lt;section class="widget"&gt;
    &lt;header&gt;
        &lt;h3&gt;Header&lt;/h3&gt;
    &lt;/header&gt;
    &lt;div class="body"&gt;
        Body
    &lt;/div&gt;
    &lt;footer&gt;
        Footer
    &lt;/footer&gt;
&lt;/section&gt;</pre>
                    <p>You can color widget's background by adding light color class. For example
                    <code>.light-blue</code>.</p>
                    <p>Widget will take as much place as inner content needs, but you can control its size:
                    <code>.tiny</code>, <code>.normal</code>, <code>.large</code>, or <code>.xlarge</code>.</p>
                    <p>Consider using some <code>.offset*</code> for <code>.span*</code> which holds widget.
                    Let background shine!</p>
                </section>
            </div>
        </div>
    </div>
</div>

<!-- jquery and friends -->
<script src="js/jquery.1.9.0.min.js"> </script>
<script src="js/jquery-migrate-1.1.0.min.js"> </script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-collapse.js"></script>

</body>
</html>